<template>
	<div class="system-user-container">
		<el-card shadow="hover" class="filtering">
			<div class="filtering-list-flex">
				<div class="filtering-list-title">搜索员工</div>
				<div class="filtering-list-item"><el-input v-model="filtering.input" placeholder="姓名、昵称、手机号" prefix-icon="el-icon-search" style="max-width: 180px"></el-input></div>
			</div>
			<div class="filtering-list-flex">
				<div class="filtering-list-title">用户角色</div>
				<div class="filtering-list-item">
					<el-select v-model="filtering.roleId" placeholder="请选择角色">
						<el-option v-for="item in roleList" :key="item.id" :label="item.rName" :value="item.id" />
					</el-select>
				</div>
			</div>
			<div class="filtering-list-flex">
				<div class="filtering-list-title">在职状态</div>
				<div class="filtering-list-item">
					<el-select v-model="filtering.state" placeholder="请选择在职状态">
						<el-option v-for="item in jobStatusList" :key="item.id" :label="item.name" :value="item.id" />
					</el-select>
				</div>
			</div>
			<div class="form-search-footer mt20">
				<el-button :loading="tableData.loading" type="primary" @click="formFind">查询</el-button>
				<el-button @click="formReset">重置</el-button>
			</div>
		</el-card>
		<el-card shadow="hover" class="mt5">
			<div class="system-user-search mb10">
				<div><el-button type="success" icon="el-icon-plus" @click="addPerson">新增员工</el-button></div>
			</div>
			<el-table v-loading="tableData.loading" :data="tableData.data" stripe highlight-current-row :header-cell-style="{ color: '#7f8da6', backgroundColor: '#F5F6F8' }">
				<el-table-column width="55" type="index" label="序号" fixed="left" />
				<el-table-column prop="userName" label="姓名" min-width="110" />
				<el-table-column prop="realName" label="昵称" min-width="110" />
				<el-table-column prop="face" label="头像" width="60">
					<template #default="scope">
						<div style="display: flex;text-align: center;">
							<el-image
								style="width: 40px; height: 40px"
								:src="getBaseUrl + scope.row.face"
								:preview-src-list="[getBaseUrl + scope.row.face]"
								fit="cover"
							>
							</el-image>
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="sex" label="性别" min-width="110">
					<template #default="scope">
						<span>{{ filterSex(scope.row.sex) }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="isManagement" label="是否管理员" min-width="110">
					<template #default="scope">
						<span>{{ filterYesOrNo(scope.row.isManagement) }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="phone" label="手机号" min-width="110" />
				<el-table-column prop="state" label="在职状态" fixed="right" min-width="80">
					<template #default="scope">
						<i class="text__dot" :style="scope.row.state === 1 ? 'background: #3dd49f;' : 'background: #ff5e41'" />
						<span>{{ filterState(scope.row.state) }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="tag" label="操作" fixed="right" width="100">
					<template #default="scope">
						<div>
							<el-button type="text" @click="showPerson(scope.row)">详情</el-button>
							<el-button type="text" @click="editPerson(scope.row)">编辑</el-button>
						</div>
					</template>
				</el-table-column>
			</el-table>
			<pagination
				v-show="tableData.total > 0"
				:total="tableData.total"
				v-model:page="tableData.param.pageNum"
				v-model:limit="tableData.param.pageSize"
				@pagination="getList"
			/>
		</el-card>
	</div>
</template>

<script lang="ts">
import { toRefs, reactive, onMounted, computed, watch } from 'vue'
import Pagination from '/@/components/Pagination/index.vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import { useRouter, useRoute } from 'vue-router'
import Base64 from '/@/utils/base64'
import { sexList, yesOrNo } from '/@/dictionaries/overall'
import { jobStatusList } from '/@/dictionaries/staff'
import { statusFilter } from '/@/utils/toolsValidate'
import { useStore } from '/@/store/index.ts'
import { getSysUserList } from '/@/api/staff'
import { getRoleList } from '/@/api/role'

export default {
	name: 'staff',
	components: { Pagination },
	setup() {
		const router = useRouter()
		const route = useRoute()
		const store = useStore()

		watch(route, val => {
			if (val.query.refresh) {
				initTableData()
			}
		})

		const getBaseUrl = computed(() => {
			return store.state.baseServices.baseServices.img_base_url
		})

		const state = reactive({
			filtering: {
				roleId: 0,
				state: 0,
				input: ''
			},
			roleList: [],
			jobStatusList: jobStatusList,
			tableData: {
				data: [
					{
						pid: 0
					}
				],
				total: 0,
				loading: false,
				param: {
					pageNum: 1,
					pageSize: 10
				}
			},
			lastPids: [] //储存每一级的pid
		})

		const filterYesOrNo = (val: Number) => {
			return statusFilter(val, yesOrNo)
		}

		const filterSex = (val: Number) => {
			return statusFilter(val, sexList)
		}

		const filterState = (val: Number) => {
			return statusFilter(val, jobStatusList)
		}

		const getRoleListApi = () => {
			getRoleList({}).then(res => {
				const { datas = [] } = res

				const allRole = { id: 0, rName: '全部角色' }

				datas.unshift(allRole)

				state.roleList = datas
			})
		}

		// 初始化表格数据
		const initTableData = () => {
			state.tableData.loading = true

			const params = {
				roleId: state.filtering.roleId,
				state: state.filtering.state,
				searchText: state.filtering.input,
				pageNum: state.tableData.param.pageNum,
				pageSize: state.tableData.param.pageSize
			}

			getSysUserList(params)
				.then(res => {
					const { datas } = res

					state.tableData.data = datas.list
					state.tableData.total = datas.total
				})
				.finally(() => {
					state.tableData.loading = false
				})
		}
		// 添加
		const addPerson = () => {
			router.push({
				path: '/staff/operationStaff',
				query: {
					info: Base64(
						JSON.stringify({
							id: null,
							type: 'add'
						})
					)
				}
			})
		}
		// 编辑
		const editPerson = (row: object) => {
			router.push({
				path: '/staff/operationStaff',
				query: {
					info: Base64(
						JSON.stringify({
							id: row.id,
							type: 'edit'
						})
					)
				}
			})
		}
		// 查看详情
		const showPerson = (row: object) => {
			router.push({
				path: '/staff/operationStaff',
				query: {
					info: Base64(
						JSON.stringify({
							id: row.id,
							type: 'show'
						})
					)
				}
			})
		}
		const getList = val => {
			state.tableData.param.pageNum = val.page
			state.tableData.param.pageSize = val.limit
			initTableData()
		}
		const formFind = () => {
			initTableData()
		}
		const formReset = () => {
			state.filtering.roleId = 0
			state.filtering.state = 0
			state.filtering.input = []
			initTableData()
		}
		// 页面加载时
		onMounted(() => {
			getRoleListApi()
			initTableData()
		})
		return {
			filterState,
			filterYesOrNo,
			filterSex,
			getBaseUrl,
			addPerson,
			editPerson,
			showPerson,
			getList,
			formFind,
			formReset,
			...toRefs(state)
		}
	}
}
</script>

<style scoped lang="scss">
.system-user-container {
	.system-user-search {
		display: flex;
		justify-content: space-between;
	}
	.system-user-photo {
		width: 40px;
		height: 40px;
	}
	.text__dot {
		width: 6px;
		height: 6px;
		border-radius: 50%;
		margin-right: 4px;
		display: inline-block;
		position: relative;
		top: -1px;
	}
}
</style>
